@import "../../theme.scss";
.zt-coupon {
    width: 710rpx;
    height: 226rpx;
    background: #fff;
    margin: 0 auto;
    border-radius: 6rpx;
    .price {
        font-size: $font-size-48;
        color: $color-domhue;
        width: 220rpx;
        height: 160rpx;
        line-height: 160rpx;
        text-align: center;
        font-weight: bold;
        &.zt-border-1px-right::after {
            border-right: 1px dotted $color-domhue;
        }
    }
    .title {
        font-size: $font-size-26;
    }
    .date {
        padding-top: 20rpx;
        font-size: $font-size-26;
        color: $color-888888;
    }
    .use {
        width: 150rpx;
        height: 54rpx;
        border-radius: 54rpx;
        font-size: $font-size-24;
    }
    .couponbom {
        height: 66rpx;
        position: relative;
        .larrow,
        .rarrow {
            position: absolute;
            top: 0;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            z-index: 2;
        }
        .larrow {
            border-left: 8px solid $color-background;
            top: -6px;
        }
        .rarrow {
            top: -6px;
            border-right: 8px solid $color-background;
            right: 0;
        }
        .icon {
            width: 70rpx;
            height: 30rpx;
            font-size: $font-size-20;
            color: #fff;
            border-radius: 6rpx;
            background: $color-ff3355;
            text-align: center;
            line-height: 30rpx;
            margin-left: 40rpx;
        }
        .subtitle {
            font-size: $font-size-22;
            padding-left: 10rpx;
        }
        .zt-cell__ft_in-access {
            &:after {
                border-width: 1px 1px 0 0;
            }
            margin-right: 20rpx;
        }
        &.zt-border-1px-top::after {
            border-top: 1px dotted $color-domhue;
        }
    }

    &.gray {
        .price,.title,.couponbom .subtitle { color: $color-888888; }
        .use,.couponbom .icon{ background: $color-888888; }
        .price {
            &.zt-border-1px-right::after {
                border-right: 1px dotted $color-888888;
            }
        }
        .couponbom {
            &.zt-border-1px-top::after {
                border-top: 1px dotted $color-888888;
            }
        }
    }
}